<template>
  <div class="contain">
    <div class="box">
    <li v-for="item in menulist" 
     @mouseenter="enter(item.id)" @mouseleave="leave(item.id)" :key="item.id"
     :class="{active: currentId === item.id}"
     >
    <router-link :to="`/cagegory${item.id}`">{{ item.name }} &nbsp</router-link>
    <template v-if='item.children'>
   
    <router-link v-for="sub in item.children" :key="sub.id"
     :to="`/cagegory/sub/${item.id}`">{{ sub.name }} &nbsp</router-link>
   </template>
   <template v-else>
    <Skeleton 
             hight:10px
            :loading="loading"
            :rowWidth='rowWidth.width'
  ></Skeleton>
   </template>
   </li>
    </div>
    <div  
>

  <div v-for="item in menulist" class='rightBox'  v-show="currentId===item.id"  @mouseover="mouseover(item.id)" @mouseleave="leave(item.id)" :key="item.id">
   <h2>分类推荐：根据您的购买推荐</h2>
<ul class='cardBox'>
<li   v-for='sub in item.goods' :key="sub.id">
<router-link :to="`/product/${sub.id}`" class='card'>
<img :src='sub.picture'>
<div class='goods'>
<span>{{sub.name}}</span>
<p>{{sub.desc}}</p>
<span class='price'>{{sub.price}}</span>
</div>
</router-link>
</li>
</ul>
  </div>
    </div>
  </div>

</template>

<script setup>

import { useStore, } from 'vuex'
import {ref,computed,reactive,refs} from 'vue'
import Skeleton from '@/components/library/Skeleton.vue'
 const store = useStore()
 const brand =reactive({
    id:'brand',
    name:'品牌',
    children:[{ id:'brand-children',name:'品牌推荐',}]
 })
 const menulist = computed(()=>{
  const list = store.state.home.categoryList.map(item =>{
    return {
    id:item.id,
    name:item.name,
    children:item.children && item.children.slice(0, 2),
    goods:item.goods
    }
  })
   list.push( brand)
    return list
 })
const currentId = ref(null)
const enter = ((id) =>{
    console.log('enter')
    
    currentId.value = id
    console.log('  currentId.value ', currentId.value)

    // $refs.hidden.css('display', 'block')
 })
 const leave = ((id)=>{
 console.log('enter')
   
     currentId.value = null
    
    
 })
 

const mouseover = ((id) =>{
    console.log('enter')
   
     currentId.value = id

 })
//  const firstloading=ref(false)
 const loading = ref(true)
 const rowWidth = reactive({
    width:'20px'
})
</script>

<style lang="less" scoped>
.contain{
    display: flex;
}
.box{
    width: 250px;
    height: 500px;
   background: rgba(0, 0, 0, 0.8);
    li {
    list-style: none;
    line-height: 50px;
     padding-left: 15px;
  
 a{
    text-decoration: none;
    font-size: 16px; 
    color: #fff;
}
}
}

.rightBox{
    width: 990px;
    height: 500px;
    background-color:rgba(66, 63, 63, 0.5);
    
    
}
.cardBox{
  display: flex;
  flex-wrap: wrap;
  img{
  width: 100px;
  height: 100px;
}
  }
.card{
 margin-left: 20px;
 margin-top: 15px;
 display: flex;
 align-items: center;
  width: 300px;
  height: 140px;
  background-color: #fff;
  padding: 10px;
  
}
.active{
  background-color: #1dc779;
}

.goods{
  width: 200px;
 
  margin-left: 10px;
  span{font-size: 16px; color: #6F6F6F;  display: inline-block;
   padding: 10px 0;}
  .price{
    color: crimson;
    font-size: 18px;
   
   
  }
  p{
    width: 170px;
   color: #B5B5B5;
     white-space: nowrap;
   /* 强制一行内显示，不允许换行 */
     overflow: hidden;
   /* 溢出部分隐藏 */
     text-overflow: ellipsis;
   /* 文字溢出用省略号显示 */
     
  }
}
</style>